{% extends "base.html" %}

{% block title %}Volunteer Dashboard - Volunteer Platform{% endblock %}

{% block content %}
<div class="dashboard-container">
    <div class="sidebar">
        <nav class="dashboard-nav">
            <ul>
                <li class="active"><a href="{{ url_for('volunteer_dashboard') }}">Dashboard</a></li>
                <li><a href="{{ url_for('volunteer_activities') }}">Browse Activities</a></li>
                <li><a href="{{ url_for('volunteer_my_activities') }}">My Activities</a></li>
                <li><a href="{{ url_for('volunteer_profile') }}">Profile</a></li>
            </ul>
        </nav>
    </div>

    <div class="main-content">
        <h1>Welcome back, {{ user.name }}</h1>
        
        <div class="stats-grid">
            <div class="stat-card">
                <h3>Total Activities</h3>
                <p class="stat-number">{{ stats.total_activities }}</p>
            </div>

            <div class="stat-card">
                <h3>Upcoming Activities</h3>
                <p class="stat-number">{{ stats.pending_activities }}</p>
            </div>
        </div>

        <div class="upcoming-activities">
            <h2>Upcoming Activities</h2>
            {% if upcoming_activities %}
            <div class="activities-grid">
                {% for activity in upcoming_activities %}
                <div class="activity-card">
                    <h3>{{ activity.title }}</h3>
                    <p class="activity-date">
                        Start Time: {{ activity.start_date.strftime('%Y-%m-%d %H:%M') }}<br>
                        End Time: {{ activity.end_date.strftime('%Y-%m-%d %H:%M') }}
                    </p>
                    <p class="activity-location">Location: {{ activity.location }}</p>
                    <p class="activity-status">Status: {{ activity.status }}</p>
                    <a href="{{ url_for('activity_detail', activity_id=activity.id) }}" class="btn">View Details</a>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <p class="no-data">No upcoming activities</p>
            {% endif %}
        </div>

        <div class="notifications">
            <h2>Latest Notifications</h2>
            {% if notifications %}
            <div class="notification-list">
                {% for notification in notifications %}
                <div class="notification-item">
                    <p class="notification-time">{{ notification.created_at.strftime('%Y-%m-%d %H:%M') }}</p>
                    <p class="notification-content">{{ notification.content }}</p>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <p class="no-data">No notifications</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %} 